<template>
  <div>
    <div style="margin-bottom: 10px">
      <a-button @click="back">返回售卡活动列表</a-button>
    </div>
    <order-data :card="card"></order-data>
    <div style="margin-top: 15px"></div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :xLength="1350"
      :hideSelect="true"
      :defaultParams="defaultParams"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="订单编号">
            <a-input
              style="width: 200px"
              v-decorator="['orderGoodsNo']"
              placeholder="请输入订单编号"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="所属门店">
            <a-input
              style="width: 200px"
              v-decorator="['shopName']"
              placeholder="请输入所属门店"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="订单时间">
            <fast-range-picker
              allowClear
              v-decorator="['createStartDate-createEndDate']"
            >
            </fast-range-picker>
          </a-form-item>

          <a-form-item label="订单状态">
            <a-select
              showSearch
              allowClear
              style="width: 150px"
              :options="showStatusList"
              v-decorator="['orderStatus']"
              placeholder="请选择"
            >
            </a-select>
          </a-form-item>

          <!-- <a-form-item label="所属机构">
            <a-input
              style="width: 200px"
              v-decorator="['shopName']"
              placeholder="请输入所属机构"
            >
            </a-input>
          </a-form-item> -->
          <a-form-item label="导购名称">
            <a-input
              style="width: 200px"
              v-decorator="['guideName']"
              placeholder="请输入导购名称"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="用户手机号">
            <a-input
              style="width: 200px"
              v-decorator="['customerPhone']"
              placeholder="请输入用户手机号"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
        </a-form>
      </template>

      <template slot="oprationRow">
        <a-button type="primary" @click="exportExcel">导出订单</a-button>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="orderInfo(record.id, record)"
            >详情</a
          >
        </a-space>
      </template>
    </search-table>
    <orderDetails
      :visible="detailsVisible"
      @cancel="closeOrderDetailsModal"
      :orderId="orderId"
      :formData="formData"
    ></orderDetails>
  </div>
</template>
<script>
import orderData from "./components/orderData.vue";
import orderDetails from "./components/orderDetails.vue";
export default {
  name: "orderList",
  components: {
    orderData,
    orderDetails,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "table_search" }),
      url: "/order/page",
      columns: [
        {
          title: "订单编号",
          dataIndex: "orderGoodsNo",
          key: "orderGoodsNo",
          width: 200,
        },
        {
          title: "联系人",
          dataIndex: "userName",
          key: "userName",
        },
        {
          title: "手机号",
          dataIndex: "customerPhone",
          width: 150,
          key: "customerPhone",
        },
        {
          title: "订单状态",
          dataIndex: "orderStatus",
          key: "orderStatus",
          customRender: (text, row) => {
            // if (!row.returnGoodsStatus) {
            if (text == "ORDER_CANCEL") {
              text = "已取消";
            } else if (text == "ORDER_UNPAID") {
              text = "待付款";
            } else if (text == "ORDER_LEFT_WAIT") {
              text = "待核销";
            } else if (text == "ORDER_UN_EVALUATE") {
              text = "已核销";
            } else if (text == "ORDER_CLOSE") {
              text = "已退款";
            }
            // } else {
            //   if (row.returnGoodsStatus == "TO_AUDIT") {
            //     text = "待审核";
            //   } else if (row.returnGoodsStatus == "APPROVE_AUDIT") {
            //     text = "审核通过";
            //   } else if (row.returnGoodsStatus == "REVIEW_FAILED") {
            //     text = "审核驳回";
            //   } else if (row.returnGoodsStatus == "USER_CANCEL") {
            //     text = "用户自行取消";
            //   } else if (
            //     row.returnGoodsStatus == "RECEIVED_GOODS" ||
            //     row.returnGoodsStatus == "WAITING_GOODS" ||
            //     row.returnGoodsStatus == "WAITING_DELIVERY"
            //   ) {
            //     text = "退货中";
            //   } else if (row.returnGoodsStatus == "REFUND_OF") {
            //     text = "退款中";
            //   } else if (row.returnGoodsStatus == "REFUND_FINISH") {
            //     text = "已退款";
            //   }
            // }
            return text;
          },
        },
        {
          title: "订单时间",
          dataIndex: "createDate",
          key: "createDate",
          width: 180,
        },
        {
          title: "订单金额",
          dataIndex: "goodsPrice",
          key: "goodsPrice",
          align: "center",
          customRender: (text, row) => {
            return (text / 100).toFixed(2);
          },
        },
        {
          title: "所属门店",
          dataIndex: "shopName",
          key: "shopName",
        },
        {
          title: "导购姓名",
          dataIndex: "guideName",
          key: "guideName",
        },
        {
          title: "角色类型",
          dataIndex: "userRoleName",
          key: "userRoleName",
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      defaultParams: {
        saleCardId: this.$route.query.order,
        orderType: "SALE_CARD_ORDER",
      },

      /*订单状态*/
      showStatusList: [
        {
          label: "待付款",
          value: "ORDER_UNPAID",
        },
        {
          label: "待核销",
          value: "ORDER_LEFT_WAIT",
        },
        {
          label: "已核销",
          value: "ORDER_UN_EVALUATE",
        },
        {
          label: "已取消",
          value: "ORDER_CANCEL",
        },
        {
          label: "已退款",
          value: "ORDER_CLOSE",
        },
      ],
      detailsVisible: false,
      orderId: "",
      formData: {},
      card: this.$route.query.order,
    };
  },
  methods: {
    orderInfo(id, record) {
      this.detailsVisible = true;
      this.orderId = id;
      this.formData = record;
    },
    closeOrderDetailsModal() {
      this.detailsVisible = false;
    },
    //导出
    exportExcel() {
      if (this.$refs.searchtable.dataSource.length == 0) {
        this.$message.warning("页面数据为空无法导出！！");
        return false;
      }
      this.$export(
        "/order/cardExport",
        this.$refs.searchtable.searchParams || {}
      );
    },
    back() {
      this.$router.push({
        name: "MarketingSellCard",
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>